I noticed while inspecting that the way we're using this colorarea margin is not how design has it defined on the specs. I don't think there is a way for us to use the token properly, as it appears to be relying on circle based calculations by the implementation. If I change --mod-colorarea-height and --mod-colorarea-width from 80px to 100%:

Design currently:

I'm wondering if we should even be setting this margin, if we can't calculate the actual value in CSS. Does this token value just need to be used when calculating the size of the color area? That "With color area" section of the docs is a little confusing. Perhaps this needs more documentation too. I don't see a SWC example with the color area within the color wheel?

Ah, good catch! I don't think we need to — I removed the custom property and the declaration and no difference is made in how it's displayed. It's positioning is controlled by...

.spectrum-ColorWheel-colorarea-container {
    block-size: auto;
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

...and the margin has no impact.

We might want to just document that the --spectrum-color-wheel-color-area-margin token used for that margin should be factored in by the implementation when calculating the size of the color area. Otherwise it could easily be forgotten about.

Added a comment above the .spectrum-ColorWheel-colorarea-container class in e1331f explaining the token (as it had previously been applied there).

At the large platform scale, the inner border is no longer at the edge (Chrome):

Ah, I was afraid this would happen — should we consider removing and provide design with the feedback that it's not possible at the moment? @marissahuysentruyt

I updated the styles here so that they're a bit more stable and based on the width of the inner, colorarea container which resolves the issue in large but causes the medium size to display within the interior of the color wheel instead of on top of the interior edge: 35403c.

All sorted thanks to @marissahuysentruyt ✨🚀

Should we still be shipping height and width mods? I see they don't really work on their own in CSS in prod, but I do see that the size of the color wheel should be customizable (https://opensource.adobe.com/spectrum-web-components/components/color-wheel/#sized).

Is there any way to allow a custom sizing example or are we excluding this because we'd need to dynamically calculate the clip-path? Are the clip path calculations not possible with CSS, or is that something that veers too far into implementation to do in our JS? Alternatively, I wonder if we could have a differently sized version in docs/VRT that shows that this still works, even if it's a hardcoded clip path?

It does seem like the implementation requirement for clip path calculation needs to be added to the component Docs.

I'm not sure — the React docs allow for the same dimensions we're seeing here (they link here) and the token that's being shipped provides the same dimensions: https://github.com/adobe/spectrum-tokens/blob/93614f4c98b5bc8ca1c017934ddfc456699a30c7/packages/tokens/src/layout-component.json#L4654

These are the default sizes, but the size can still be customized (as longer as it's greater than or equal to the minimum size), as mentioned in the guideline. I don't think we necessarily need to generate the clip-path calculation at this time.

Mods: There should still be a mod wherever --spectrum-colorwheel-width and --spectrum-colorwheel-height are used. Unless there was some reason you were getting rid of them; it's especially important when the size of the color slider is being changed since there is other CSS calculating off these values. Also what about --mod-colorwheel-track-width and should there be a --mod-colorwheel-border-width?

Also, I see you renamed min-width to min-inline-size; should the same logical property renaming be done to the width and height tokens to be consistent?

Docs: Could you add something about the implementation requirement for clip path calculation when changing the size?

New custom sizing story?: What if we add a custom sizing story at 300x300? We can use the mod for the clip path with the value being generated in SWC's sizing example. The docs about the clip path calculation could be included in the story description here. This would help ensure in our VRTs that this use case is still working.

Docs: Speaking of the "With color area" section of the docs, it looks like some of the existing docs are incorrect. I see mention of a couple classes that I think were meant to reference a custom property instead. See ".spectrum-colorwheel-colorarea-container-size", ".spectrum-color-wheel-color-area-margin", ".spectrum-colorwheel-path", etc.

I ran through and cleaned these up — some are classes, some are custom properties and some have been removed altogether. ✨